<template>
  <div class="userPage">
    <el-container>
      <splitpanel title="组织架构" icon="company" :request="request" :department="department" :defaultProps="defaultProps" @handleNodeClick="handleNodeClick"></splitpanel>
        <el-main style="padding: 10px 0 0 0">
          <el-header style="padding: 0 10px">
            <div class="report_header" ref="headerHeight">
              <div class="report_header_left"></div>
              <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
                  <div class="report_header_query">
                    <el-input prefix-icon="el-icon-search" placeholder="姓名" v-model="query.name"></el-input>
                  </div>
                  <div class="report_header_query">
                    <el-input prefix-icon="el-icon-search" placeholder="工号"  v-model="query.number"></el-input>
                  </div>
                </div>
                <div>
                <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="querySysEmployee">查询</el-button>
                <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
                           v-permission="['sysEmployee.add']">新增</el-button>
                </div>
              </div>
            </div>
          </el-header>
          <div class="pd10">
            <div>
              <el-table
                ref="multipleTable"
                :data="SysEmployeeForm"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                border
                :height="curHeight"
              >
                <el-table-column
                  label="序号"
                  type="index"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="empNo"
                  label="工号"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="officeName"
                  label="部门"
                  align="center"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                  align="center"
                  width="80"
                >
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status == 0?'info':'success'">
                      <span>{{scope.row.status | watchStatus}}</span>
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注"
                >
                </el-table-column>
                <el-table-column
                  label="功能"
                  align="center"
                  prop="remark"
                  width="80"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="启用或停用" placement="top-start">
                      <el-button v-permission="['sysEmployee.edit']" :loading="scope.row.loading" @click="openSysEmployee(scope.row)" type="primary" size="mini">{{scope.row.status == 0?'启用':'停用'}}</el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="80" align="center">
                  <template slot-scope="scope">
                    <div>
                      <el-tooltip v-permission="['sysEmployee.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                        <a  @click="editClick(scope.row)">
                          <i style="color: #409EFF" class="el-icon-edit"></i>
                        </a>
                      </el-tooltip>
                      <el-tooltip v-permission="['sysEmployee.del']" class="item" effect="dark" content="删除" placement="top-start">
                        <a style="margin-left: 10px"  @click="deleteSysEmployee(scope.row)">
                          <i style="color: #F56C6C" class="el-icon-delete"></i>
                        </a>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="height: 50px;padding-left: 10px;border-top: 1px solid #eeeeee">
            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadsysEmployee"></pagination>
          </div>



      </el-main>
    </el-container>
  </div>
</template>



<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import splitpanel from '@/components/SplitPanel'
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex'
  import {list, del,update} from '@/api/sysEmployee'
  import {list as treeList} from '@/api/sysOffice'
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  export default {
    name:'sysEmployee-list',
    directives: { permission },
    data() {
      return {
        query: {
          name: '',
          number: ''
        },
        // 返回数据
        queryType:false,
        curHeight:null,
        isCollapse: false,
        queryName: '',
        queryNumber: '',
        keyword:{
          name:'',
          number:''
        },
        pageNum: 1,// 当前页
        pageSize: 20, // 每页显示条目个数
        total: 0,// 总条目数
        SysEmployeeForm: [],
        officeId: '',
        department: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        sysEmployeeOpenForm: {
          id: '',
          status: ''
        },
        request:'sysOffice'
      };
    },
    components: {
      splitpanel,Pagination
    },
    filters:{
      watchStatus(val){
        if (val  == 1){
          return '启用'
        }else {
          return '停用'
        }
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
      ]),
    },
    mounted(){
      this.comeIn();
      this.beforeMount()
    },
    created() {
      var _this = this
      this.loadsysEmployee()
      this.treeList()
      EventBus.$on('teamLeader-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.SysEmployeeForm.splice(0, 0,res)
      })
      EventBus.$on('teamLeader-edit', res => { // 监听新增完毕
        // 更新列表数组
        for (var i=0;i<_this.SysEmployeeForm.length;i++){
          if (_this.SysEmployeeForm[i].id == res.id){
            _this.SysEmployeeForm[i] = res
          }
        }
      })
    },
    methods: {
      addClick:function () {
        this.$router.push({path: '/teamLeader/add'});
      },
      querySysEmployee(data) {
        var _this = this
        _this.keyword.name = data.name;
        _this.keyword.number = data.number;
        _this.pageNum = 1;
        _this.loadsysEmployee()
      },
      resetSysEmployee(){
        this.keyword.name = '';
        this.keyword.number = '';
        this.pageNum = 1;
        this.loadsysEmployee()
      },
      editClick (data) {
        this.$router.push({
          path: '/teamLeader/edit',
          query: {form: data}
        });
      },
      leftBotton: function () {
        this.isCollapse = !this.isCollapse
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == true) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 286//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 240//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn(){
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 240//减去页面上固定高度height
      },
      handleNodeClick(data) {
        console.log(data);
        var _this = this
        _this.pageNum = 1;
        _this.pageSize = 10;
        _this.total = 0;
        _this.officeId = data.id;
        _this.loadsysEmployee()
      },
      loadsysEmployee() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('empNo', _this.keyword.number);
        params.append('employeeType',2)
        params.append('name', _this.keyword.name);
        params.append('officeId', _this.officeId);
        list(params).then(response => {
          console.log(response)
          response.data.data.map(item => { return item.loading = false })
          _this.SysEmployeeForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      deleteSysEmployee(data) {
        console.log(data);
        var _this = this;
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data).then(response => {
            console.log(response)
            _this.SysEmployeeForm.forEach(function (item,index) {
              if (item.id == data){
                _this.SysEmployeeForm.splice(index,1)
              }
            });
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }).catch(error => {
            console.log('error!!')
          });
        }).catch(() => {

        })
      },
      treeList() {
        var _this = this
        treeList().then(response => {
          console.log(response)
          _this.department = response.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      openSysEmployee(row) {
        var _this = this
        console.log(row);
        this.sysEmployeeOpenForm.id = row.id;
        if (row.status == 0) {
          this.sysEmployeeOpenForm.status = 1
        } else if (row.status == 1) {
          this.sysEmployeeOpenForm.status = 0
        }
        update(_this.sysEmployeeOpenForm).then(response => {
          console.log(response)
          _this.SysEmployeeForm.forEach(function (item) {
            if (item.id == row.id){
              console.log('22222')
              item.status = response.data.status
            }
          })
          _this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          row.loading = false
        }).catch(error => {
          row.loading = false
          console.log('error!!')
        });
      },
    }
  }
</script>
<style>

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
     height: 100% !important;
    padding-bottom: 0;
    /*height: 0px;*/
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
</style>
